Grouping the Controls of HTML Forms
29-01-18 Course- HTML5-Simple
In HTML, you can group the HTML controls as being logically related in a Web form. For example, you can group the text fields, radio buttons, or check boxes together. The <fieldset> and <legend> tags help you to group the controls of your HTML form. The <fieldset> tag creates a box around the related form controls and the <legend> tag defines a caption for the fieldset element. These two tags help you to layout your forms better without having to use tables. Let’s do the following steps to group the controls of the HTML form.
<!DOCTYP html>
<html>
<head>
<title>Grouping the controls</title>
</head>
<body>
<center>
<h3>Grouping of Controls</h3>
<fieldset>
<legend><b>Personal Information:</b></legend><br>
Name: <input type=”text” size=”30” />
Email: <input type=”text” size=”30”/>
</fieldset><br>
<fieldset>
<legend><b>Favorite Color:</b></legend><br>
Blue <input type=”Radio” name=”fevcolor” />
Green <input type=”Radio” name=”fevcolor” />
Yellow <input type=”Radio” name=”fevcolor” />
</fieldset><br>
<fieldset>
<legend><b>Health Information : </b></legend><br>
Height <input type=”text” size=3” />
Width <input type=”text” size=3” />
</fieldset>
</center>
</body>
</html>
Save the document with the name GroupingControls.html and open on browser.
Let’s now learn to specify a label for a control on a Web page.